<template>
  <div>
      <input v-model="phone" v-if="type1==1" type="text" :placeholder="title" class="inputCss" @input="getPhone">
      <input v-model="pwd" v-else-if="type1==3" type="password" :placeholder="title" class="inputCss" @input="getPwd">
      <div v-else class="setPwdCode">
        <input v-model="code" type="number" :placeholder="title" class="inputCss" @input="getValue">
        <div id="inputTime" > 
          <span v-if="!showTime" @click="getCode" class="codeBlue">获取验证码</span>
          <span v-if="showTime" style="font-size:.4rem">{{this.time}}秒后重试</span>
        </div>
      </div>
      <toast 
        v-model="showPositionValue" 
        type="text" 
        :time="2000" 
        is-show-mask 
        :text="msg" 
        position="middle"></toast>
  </div>
</template>
<script>
import { Toast } from 'vux'
import {getCode} from '../../../../service/getData'
import {verify,showMsg} from '../../../../config/mUtils'

export default {
  components:{
    Toast
  },
  props:['title','type','type1','phone1'],
  data(){
    return {
      showTime:false,
      second:60,
      msg:'',
      showPositionValue:false,
      code:'',
      phone:'',
      pwd:''
    }
  },
  methods:{
    getCode(){
      if(verify(this.phone1)){
        showMsg('手机格式不正确')
      }else{
        getCode(this.type,this.phone1)
          .then(res=>{
            if(res.status == 1){
              let that = this;
              this.showTime = true;
        
              let timer = window.setInterval(function(){
                if((that.second--) <= 0){
                  that.showTime = false;
                  that.second = 60;
                  clearInterval(timer)
                }
              },1000)
            }
            showMsg(res.msg,this)
          })
      }
    },
    getValue(){
      this.$emit('getValue',this.code)
    },
    getPhone(){
      this.$emit('getPhone',this.phone)
    },
    getPwd(){
      this.$emit('getPwd',this.pwd)
    }
  },
  computed:{
    time:function(){
      return this.second;
    }
  }
}
</script>
<style lang="less">
  @import '../../../../style/mixin.less';

  .inputCss{
    .wh(100%,1.4667rem);
    outline: none;
    border: 1px solid #f6f6f6;
    border-left: none;
    border-right: none;
    border-top: none;
    font-size: 0.4rem;
  }
  .setPwdCode{
    #inputTime{
      display: inline-block;
      position: absolute;
      top: 34%;
      right: 0;
      .codeBlue{
        .sc(.4rem,#327bf6)
      }
    }   
  }
  .weui-toast,.weui-toast_text,.vux-toast-middle{
    width: 70% !important;
  }
</style>
